<template>
  <div class="banner" :style="{
    backgroundColor: config.pageConfig.color,
  }">
    <div :style="{
      marginTop: config.pageConfig.marginTop + 'px',
      marginBottom: config.pageConfig.marginBottom + 'px',
      marginLeft: config.pageConfig.margin + 'px',
      marginRight: config.pageConfig.margin + 'px',
    }">
      <div class="img" :class="config.pageConfig.style == 2 ? 'shadow-style' : ''" :style="
        config.pageConfig.style == 3
          ? {
            borderWidth: config.pageConfig.borderWidth + 'px',
            borderColor: config.pageConfig.borderColor,
            borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
            borderTopRightRadius: config.pageConfig.radiusTop + 'px',
            borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
            borderBottomRightRadius: config.pageConfig.radiusBottom + 'px',
            backgroundColor: config.pageConfig.componentcolor,
          }
          : {
            borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
            borderTopRightRadius: config.pageConfig.radiusTop + 'px',
            borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
            borderBottomRightRadius: config.pageConfig.radiusBottom + 'px',
            backgroundColor: config.pageConfig.componentcolor,
          }
      ">
        <ul v-if="config.pageConfig.componnetstyle != '3'" class="btngroup-content"
          :class="config.pageConfig.componnetstyle == '2' ? 'scroll' : ''">
          <li v-for="(item, index) in config.pageConfig.imgList" :key="index" :class="
            config.pageConfig.num == 4
              ? 'col-four'
              : config.pageConfig.num == 3
                ? 'col-three'
                : 'col-five'
          ">
            <div class="img-contain" v-if="
              config.pageConfig.icontype == '1' &&
              config.pageConfig.iconStyle != '3'
            ">
              <img :src="item.imgUrl" alt="" :class="
                config.pageConfig.shape == '3'
                  ? 'shape-circle'
                  : config.pageConfig.shape == '2'
                    ? 'shape-radius'
                    : 'shape-square'
              " />
              <p class="hot-label" v-if="item.labelShow" :style="{
                color: item.textColor,
                backgroundColor: item.labelColor,
              }">
                {{ item.labelContent }}
              </p>
            </div>
            <span v-else-if="
              config.pageConfig.icontype == '2' &&
              config.pageConfig.iconStyle != '3'
            " :style="{
  color: config.pageConfig.iconcolor,
}" class="iconfont" :class="'icon-' + item.iconUrl"></span>
            <p v-if="config.pageConfig.iconStyle != '2'" :style="{
              fontSize: config.pageConfig.titleSize + 'px',
              color: config.pageConfig.textcolor,
            }">
              {{ item.title }}
            </p>
          </li>
        </ul>
        <div v-else class="es-menu-group-swiper" :class="
          config.pageConfig.columnNum == 1 ? 'page-row-1' : 'page-row-2'
        ">
          <div class="swiper-container">
            <div v-for="(item, index) in getCurrentImgList()" :key="index" :class="
              config.pageConfig.num == 4
                ? 'col-four'
                : config.pageConfig.num == 3
                  ? 'col-three'
                  : 'col-five'
            ">
              <div class="img-contain" v-if="
                config.pageConfig.icontype == '1' &&
                config.pageConfig.iconStyle != '3'
              ">
                <img :src="item.imgUrl" alt="" :class="
                  config.pageConfig.shape == '3'
                    ? 'shape-circle'
                    : config.pageConfig.shape == '2'
                      ? 'shape-radius'
                      : 'shape-square'
                " />
                <p class="hot-label" v-if="item.labelShow" :style="{
                  color: item.textColor,
                  backgroundColor: item.labelColor,
                }">
                  {{ item.labelContent }}
                </p>
              </div>
              <span v-else-if="
                config.pageConfig.icontype == '2' &&
                config.pageConfig.iconStyle != '3'
              " :style="{
  color: config.pageConfig.iconcolor,
}" class="iconfont" :class="'icon-' + item.iconUrl"></span>
              <p v-if="config.pageConfig.iconStyle != '2'" :style="{
                fontSize: config.pageConfig.titleSize + 'px',
                color: config.pageConfig.textcolor,
              }">
                {{ item.title }}
              </p>
            </div>
          </div>
          <div class="swiper-arrow left" @click="prevData">
            <span class="iconfont icon-arrow-left"></span>
          </div>
          <div class="swiper-arrow right" @click="nextData">
            <span class="iconfont icon-arrow-right"></span>
          </div>
          <div class="swiper-dots">
            <div class="dots" v-for="i in dotsLength" :key="i" @click="toindex(i)" :class="i == index ? 'active' : ''">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "Btngroup",
};
</script>
<script lang="ts" setup>
import { reactive, onMounted } from "vue";
const config = defineProps({
  pageConfig: {
    type: Object,
    default: {
      iconStyle: "1",
      shape: "3",
      icontype: "1",
      componnetstyle: "1",
      num: 4,
      columnNum: 1,
      style: "1",
      color: "transparent",
      componentcolor: "#fff",
      textcolor: "#333333",
      iconcolor: "#666666",
      marginTop: 8,
      marginBottom: 8,
      margin: 0,
      radiusTop: 0,
      radiusBottom: 0,
      borderColor: "transparent",
      borderWidth: 1,
      imgList: [
      {
          title: "按钮文字",
          imgUrl: './imagesStatic/1665539452000cDw3default_btn1.png',
          iconUrl: "copy-document",
          labelShow: true,
          labelContent: "热门",
          labelColor: "#f83287",
          textColor: "#fff",
          name: "",
          url: "",
        },
        {
          title: "按钮文字",
          imgUrl: './imagesStatic/1665539531000Fh8Qdefault_btn2.png',
          iconUrl: "copy-document",
          labelShow: true,
          labelContent: "热门",
          labelColor: "#f83287",
          textColor: "#fff",
          name: "",
          url: "",
        },
        {
          title: "按钮文字",
          imgUrl:'./imagesStatic/1665539564000CKFndefault_btn3.png',
          iconUrl: "copy-document",
          labelShow: true,
          labelContent: "热门",
          labelColor: "#f83287",
          textColor: "#fff",
          name: "",
          url: "",
        },
        {
          title: "按钮文字",
          imgUrl:'./imagesStatic/1665539598000wWKmdefault_btn4.png',
          iconUrl: "copy-document",
          labelShow: true,
          labelContent: "热门",
          labelColor: "#f83287",
          textColor: "#fff",
          name: "",
          url: "",
        },
      ],
    },
  },
});
let emits = defineEmits<{ (e: "close", flag: boolean): void }>();
const dotsLength = ref(1);
let index = ref(1);
const getCurrentImgList = () => {
  const idx = config.pageConfig.columnNum * config.pageConfig.num;
  dotsLength.value = Math.ceil(config.pageConfig.imgList.length / idx);
  const temp = (index.value - 1) * idx;
  if (config.pageConfig.imgList.length >= temp) {
    return config.pageConfig.imgList.slice(temp, index.value * idx);
  } else {
    return config.pageConfig.imgList;
  }
};
const prevData = () => {
  if (index.value > 1) {
    --index.value;
    getCurrentImgList();
  }
};
const nextData = () => {
  if (dotsLength.value > index.value) {
    ++index.value;
    getCurrentImgList();
  }
};
const toindex = (idx) => {
  index.value = idx;
  getCurrentImgList();
};
watch(
  () => config.pageConfig.imgList,
  () => {
    getCurrentImgList();
  }
);
watch(
  () => config.pageConfig.num,
  () => {
    index.value = 1;
    getCurrentImgList();
  }
);
watch(
  () => config.pageConfig.columnNum,
  () => {
    index.value = 1;
    debugger;
    getCurrentImgList();
  }
);
</script>
<style lang="scss" scoped>
.banner {
  width: 100%;
  overflow: hidden;
}

.img {
  width: 100%;
  overflow: hidden;
  position: relative;
  border: 1px solid transparent;

  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0 8px;

    &.scroll {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: scroll;
    }

    li {
      list-style: none;

      &.col-four {
        width: 25%;
        min-width: 25%;
      }

      &.col-three {
        width: 33.3%;
        min-width: 33.3%;
      }

      &.col-five {
        width: 20%;
        min-width: 20%;
      }

      .img-contain {
        height: 45px;
        width: 100%;
        margin: 5px auto;
        position: relative;

        img {
          display: block;
          margin: 0px auto;
          height: 45px;
          width: 45px;

          &.shape-circle {
            border-radius: 50%;
          }

          &.shape-radius {
            border-radius: 10px;
          }

          &.shape-square {
            border-radius: 0;
          }
        }

        .hot-label {
          position: absolute;
          width: 53px;
          height: 26px;
          transform: scale(0.8);
          color: #fff;
          font-size: 14px;
          top: -10px;
          left: 50%;
          margin-left: -6px;
          background: #f83287;
          border-radius: 12px 12px 12px 0;
          border: 1px solid #fff;
          z-index: 22;
        }
      }

      .iconfont {
        display: block;
        height: 30px;
        width: 45px;
        margin: 10px auto;
        text-align: center;
        line-height: 30px;
        font-size: 24px;
      }

      p {
        text-align: center;
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.5;
      }
    }
  }
}

.shadow-style {
  border: none;
  box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
  -webkit-box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
  -moz-box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

::-webkit-scrollbar-track-piece {
  background: #fff;
}

.es-menu-group-swiper {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-bottom: 20px;

  &:hover {
    .swiper-arrow {
      display: block;
    }
  }

  .swiper-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    >div {
      &.col-four {
        width: 25%;
        min-width: 25%;
      }

      &.col-three {
        width: 33.3%;
        min-width: 33.3%;
      }

      &.col-five {
        width: 20%;
        min-width: 20%;
      }

      .img-contain {
        height: 45px;
        width: 100%;
        margin: 5px auto;
        position: relative;

        img {
          display: block;
          margin: 0px auto;
          height: 45px;
          width: 45px;

          &.shape-circle {
            border-radius: 50%;
          }

          &.shape-radius {
            border-radius: 10px;
          }

          &.shape-square {
            border-radius: 0;
          }
        }

        .hot-label {
          position: absolute;
          width: 53px;
          height: 26px;
          transform: scale(0.8);
          color: #fff;
          font-size: 14px;
          top: -10px;
          left: 50%;
          margin-left: -6px;
          background: #f83287;
          border-radius: 12px 12px 12px 0;
          border: 1px solid #fff;
          z-index: 22;
        }
      }

      :deep(.el-icon) {
        display: block;
        height: 30px;
        width: 45px;
        margin: 10px auto;
        text-align: center;
        line-height: 30px;
        font-size: 24px;
      }

      .iconfont {
        display: block;
        height: 30px;
        width: 45px;
        margin: 10px auto;
        text-align: center;
        line-height: 30px;
        font-size: 24px;
      }

      p {
        text-align: center;
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.5;
      }
    }
  }

  .swiper-arrow {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    top: 50%;
    z-index: 10;
    left: 10px;
    text-align: center;
    line-height: 32px;
    font-size: 20px;
    cursor: pointer;
    margin-top: -16px;
    display: none;

    &.right {
      left: auto;
      right: 10px;
    }

    span {
      color: #fff;
    }
  }

  .swiper-dots {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 30px;
    line-height: 30px;
    text-align: center;

    .dots {
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      margin: 0 4px;
      background: rgba(0, 0, 0, 0.2);
      cursor: pointer;

      &.active {
        background: #000;
      }
    }
  }
}
</style>
